<template>
	<!-- 店铺管理 -->
	<view class="shopmanage-container">
		<view class="user-list flex items-center justify-between">
			<text class="list-name">店铺名称</text>
			<view class="flex">
				<text class="list-val">{{ shopinfo.name }}</text>
			</view>
		</view>
		<view class="user-list flex items-center justify-between">
			<text class="list-name">店铺管理员</text>
			<view class="flex">
				<text class="list-val">{{ shopinfo.franchiseeName }}</text>
			</view>
		</view>
        <view class="user-list flex items-center justify-between">
			<text class="list-name">管理员手机</text>
			<view class="flex">
				<text class="list-val">{{ shopinfo.mobile }}</text>
			</view>
		</view>
		<view class="user-list flex items-center justify-between" @click="showOpenDate = true">
			<text class="list-name">店铺开业时间</text>
			<view class="flex items-center">
				<text class="list-val">{{ shopForm.openDate?shopForm.openDate: "请选择店铺开业时间~" }}</text>
                <image class="chevronright" :src="IMG_URL2+'common/chevron-right.svg'"></image>
			</view>
		</view>
        <view class="user-list flex items-center justify-between" @click="showWorkTime = true">
			<text class="list-name">店铺上班时间</text>
			<view class="flex items-center">
				<text class="list-val">{{ workTime1?workTime1: "请选择店铺上班时间~" }}</text>
                <image class="chevronright" :src="IMG_URL2+'common/chevron-right.svg'"></image>
			</view>
		</view>
		<view class="user-list flex items-center justify-between" @click="showWorkTime1 = true">
			<text class="list-name">店铺下班时间</text>
			<view class="flex items-center">
				<text class="list-val">{{ workTime2?workTime2: "请选择店铺下班时间~" }}</text>
                <image class="chevronright" :src="IMG_URL2+'common/chevron-right.svg'"></image>
			</view>
		</view>
        <view class="user-list flex items-center justify-between">
			<text class="list-name">店铺实用面积</text>
			<view class="flex items-center">
				<input class="list-val" v-model="shopForm.area" placeholder="请输入店铺实用面积~" maxlength="50"
					placeholder-style="color:#c8c9cc;fontSize:28rpx" type="number" step="0.1" />
                <text class="unit">m²</text>    
			</view>
		</view>

        <view class="button-box px-48">
			<!-- 专营商-显示切换店铺 -->
			<view class="exit-login bg1" v-if="role==2" @click="onChangeShop">切换店铺</view>
			<view class="exit-login bg2"  v-if="role==2" @click="onSave" :disabled="loading">
				<up-loading-icon class="loading" color="#fff" size="16" :show="loading"></up-loading-icon><text>保存</text>
			</view>
		</view>
		<up-datetime-picker
            :show="showOpenDate"
            v-model="value1"
            mode="date"
            @cancel="cancelOpenDate" @confirm="confirmOpenDate"
        ></up-datetime-picker>

		<up-datetime-picker
			:show="showWorkTime"
			v-model="value4"
			mode="time"
			title="请选择店铺上班时间"
			closeOnClickOverlay
			@confirm="confirmWorkTime"
			@cancel="cancelWorkTime"
		></up-datetime-picker>

		
		<up-datetime-picker
			:show="showWorkTime1"
			v-model="value5"
			mode="time"
			title="请选择店铺下班时间"
			closeOnClickOverlay
			@confirm="confirmWorkTime1"
			@cancel="cancelWorkTime1"
		></up-datetime-picker>


	</view>
</template>

<script setup>
import { computed, ref, reactive, onBeforeMount, unref } from 'vue';
import test from '@/superant/helper/test.js';
import $helper from '@/superant/helper';
import { getStorage } from "@/utils/storage";
import { IMG_URL2 } from "@/config";
import {  shopApi } from "@/api";
import {formatDate} from '@/utils/util';
let role=ref(getStorage('role'))
const loading = ref(false);
let shopinfo = reactive({
    name:'',
	franchiseeName:'',
	mobile:''
})
let workTime1 =ref('')
let workTime2 =ref('')
const shopForm = reactive({
    area:'',
	openDate:'',
	workTime:'',
});
let showOpenDate = ref(false);
let value1 = ref(Date.now());
let showWorkTime = ref(false);
let showWorkTime1 = ref(false);
let value4 = ref('');
onLoad((options) => {
    console.log("url参数", options);
	shopApi.SHOPGETCURRENTSHOPINFO().then((res)=>{
		if(res.code==200){
			shopinfo.name=res.result.name
			shopinfo.franchiseeName=res.result.franchiseeName
			shopinfo.mobile=res.result.mobile

			shopForm.area=res.result.area
			shopForm.openDate=res.result.openDate

			if(res.result.workTime){
				workTime1.value=res.result.workTime.split('-')[0]
				workTime2.value=res.result.workTime.split('-')[1]
			}
			value1.value=new Date(res.result.openDate).getTime()
		}else{
			uni.showToast({ title: res.errMsg, icon: "none" });
		}
		
	})
});
const confirmOpenDate=(e)=>{
    shopForm.openDate = formatDate(e.value)
    showOpenDate.value = false
}
const cancelOpenDate = ()=>{
    showOpenDate.value = false
}

const confirmWorkTime=(e)=>{
	workTime1.value = e.value
    showWorkTime.value = false
}
const cancelWorkTime = ()=>{
    showWorkTime.value = false
}

const confirmWorkTime1=(e)=>{
	workTime2.value = e.value
    showWorkTime1.value = false
}
const cancelWorkTime1 = ()=>{
    showWorkTime1.value = false
}

const onChangeShop = () => {
	uni.navigateTo({ url: `/pagesshop/shop/chooseshop` });
	
}

function isNumberWithDot(str) {
    const regex = /^\d+(\.\d+)?$/;
    return regex.test(str);
}
// 保存信息
async function onSave() {
	if(workTime1.value){
		if(!workTime2.value){
			uni.showToast({ title: '请选择店铺下班时间', icon: "none" });
			return
		}
	}
	if(workTime2.value){
		if(!workTime1.value){
			uni.showToast({ title: '请选择店铺上班时间', icon: "none" });
			return
		}
	}
	if (shopForm.area) {
		// if (!isNumberWithDot(shopForm.area)) {
		// uni.showToast({ title: '请输入正确的店铺实用面积', icon: "none" });
		// return
		// }

		if (!test.amount(shopForm.area)) {
        	$helper.toast('请输入正确的店铺实用面积');
        return;
    }
	}

	let params ={
		area:shopForm.area,
		openDate:shopForm.openDate,
		workTime:`${workTime1.value?workTime1.value:''}-${workTime2.value?workTime2.value:''}`,
	}
	loading.value = true;
    shopApi.FRANCHISEEUPDATESHOPINFO(params).then((res)=>{
		loading.value = false;
		if(res.code==200){
			uni.showToast({ title: res.errMsg, icon: "none" });
		}else{
			uni.showToast({ title: res.errMsg, icon: "none" });
		}

    }).catch((err)=>{
        console.log(err)
    })
}

</script>

<style lang="scss" scoped>
.shopmanage-container {
	.info-head {
		.info-title {
			line-height: 60rpx;
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
		}

		.save-btn {
			color: #fff;
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			width: 100rpx;
			border-radius: 30rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
		}

		.dis-btn {
			opacity: 0.5;
		}
	}


	// 个人信息项
	.user-list {
		background: #fff;
		height: 100rpx;
		border-bottom: 1rpx solid #f6f6f6;
		padding: 0 20rpx;
		box-sizing: border-box;
        

        .chevronright {
            width: 32rpx;
            height: 32rpx;
            margin-left: 24rpx;
        }
        .unit{
            //styleName: Body/Large;
            font-family: PingFang SC;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            text-align: right;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            color: rgba(0, 0, 0, 0.9);
            margin-left: 24rpx;
        }

		.list-name {
			font-size: 32rpx;
			color: rgba(0, 0, 0, 0.6);
		}

		.avatar {
			width: 67rpx;
			height: 67rpx;
			border-radius: 50%;
		}

		.list-val {
			color: #999;
			font-size: 28rpx;
			text-align: right;
		}
	}

	.button-box {
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		left: 0;
		z-index: 9;
		background-color: #fff;
	}

	.exit-login {
		width: 654rpx;
		height: 92rpx;
		line-height: 92rpx;
		background: #D68E44;
		color: #ffffff;
		text-align: center;
		border-radius: 64px;
		font-size: 32rpx;
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
    .bg1{
		background: rgba(253, 236, 219, 1);
		color: rgba(145, 74, 0, 1);
	}

	.exit-login:after {
		border: none;
	}

	.tips {
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		text-align: right;
		text-underline-position: from-font;
		text-decoration-skip-ink: none;
		color: rgba(145, 74, 0, 1);
		padding:24rpx;
		box-sizing: border-box;
	}
}
</style>
